<template>
	<view class="container">
		<uwo-nav-bar bgColor="#2979ff">
			<template #content>多列表刷新</template>
		</uwo-nav-bar>
		<uwo-search-bar @search="search" bgColor="#F8F8F8"></uwo-search-bar>
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index == tabIndex ? 'text-primary cur' : ''" v-for="(item, index) in tabs" :key="index" @tap="tabSelect" :data-id="index">
					<view class="" style="position: relative">
						<uni-badge absolute="rightTop" :offset="[-3, 10]" text="80" type="error">
							{{ item.name }}
						</uni-badge>
					</view>
				</view>
			</view>
		</scroll-view>
		<multi-list-item ref="mescrollItem0" :i="0" :params="searchParams" :index="tabIndex"></multi-list-item>
		<multi-list-item ref="mescrollItem1" :i="1" :params="searchParams" :index="tabIndex"></multi-list-item>
		<multi-list-item ref="mescrollItem2" :i="2" :params="searchParams" :index="tabIndex"></multi-list-item>
		<multi-list-item ref="mescrollItem3" :i="3" :params="searchParams" :index="tabIndex"></multi-list-item>
		<multi-list-item ref="mescrollItem4" :i="4" :params="searchParams" :index="tabIndex"></multi-list-item>
	</view>
</template>

<script setup>
/**
 * 多列表刷新，一般只需要且经常根据状态快捷区分数据的时候使用
 * 一般用不上更多过滤
 * 一般按照最新排序即可
 */
import { ref } from 'vue';
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import useMescrollMore from '@/uni_modules/mescroll-uni/hooks/useMescrollMore.js';
import multiListItem from '@/pages/devloper/multiList/multiListItem.vue';
const mescrollItem0 = ref(null);
const mescrollItem1 = ref(null);
const mescrollItem2 = ref(null);
const mescrollItem3 = ref(null);
const mescrollItem4 = ref(null);

// 使用useMescrollMore,完善每个子组件的页面级生命周期
const mescrollItems = [mescrollItem0, mescrollItem1, mescrollItem2, mescrollItem3, mescrollItem4];
const { tabIndex, getMescroll, scrollToLastY } = useMescrollMore(mescrollItems, onPageScroll, onReachBottom);
// tab切换的时候恢复滚动条
const tabChange = () => {
	scrollToLastY();
};
const searchParams = ref({});

const tabs = ref([
	{
		name: '全部',
		state: 2
	},
	{
		name: '进行中',
		state: 1
	},
	{
		name: '未开始',
		state: 3
	},
	{
		name: '已完成',
		state: 1
	},
	{
		name: '已逾期',
		state: 1
	}
]);
const tabSelect = (e) => {
	tabIndex.value = e.currentTarget.dataset.id;
	scrollToLastY();
};
const search = (params) => {
	// 处理排序参数
	if (params.order) {
		// name-order
		const str = params.order.split('-');
		params.sortName = str[0];
		params.sortOrder = str[1];
		delete params.order;
	}
	searchParams.value = params;
};
</script>

<style lang="scss" scoped>
.nav {
	position: fixed;
	top: 92px;
	left: 0;
	right: 0;
	z-index: 100;
}
</style>
